<!--
 * @Description: 表单项属性，控件属性面板
-->
<template>
  <div class="properties-content">
    <div class="properties-body" v-if="formConfig.currentItem?.itemProps">
      <Empty class="hint-box" v-if="!formConfig.currentItem.key" description="未选择控件" />
      <div v-else>
<!--        电脑端表单-->
        <Form  label-align="left" layout="vertical"  v-if="!formConfig.currentItem.isH5">
          <div v-for="item of baseFormItemProps" :key="item.name">
            <FormItem :label="item.label" v-if="showProps(item.exclude)">
              <component
                v-if="item.component"
                class="component-props"
                v-bind="item.componentProps"
                :is="item.component"
                v-model:value="formConfig.currentItem[item.name]"
              />
            </FormItem>
          </div>
          <div v-for="item of advanceFormItemProps" :key="item.name">
            <FormItem :label="item.label" v-if="showProps(item.exclude)">
              <component
                v-if="item.component"
                class="component-props"
                v-bind="item.componentProps"
                :is="item.component"
                v-model:value="formConfig.currentItem.itemProps[item.name]"
              />
            </FormItem> </div
          >
          <div v-for="item of advanceFormItemColProps" :key="item.name">
            <FormItem :label="item.label" v-if="showProps(item.exclude)">
              <component
                v-if="item.component"
                class="component-props"
                v-bind="item.componentProps"
                :is="item.component"
                v-model:value="formConfig.currentItem.itemProps[item.name]['span']"
              />
            </FormItem>
          </div>
          <FormItem label="控制属性" v-if="controlPropsList.length">
            <Col v-for="item of controlPropsList" :key="item.name">
              <Checkbox v-model:checked="formConfig.currentItem.itemProps[item.name]">
                {{ item.label }}
              </Checkbox>
            </Col>
          </FormItem>
          <FormItem label="是否必选" v-if="!['Grid'].includes(formConfig.currentItem.component)">
            <Switch v-model:checked="formConfig.currentItem.itemProps['required']" />
            <Input
              v-if="formConfig.currentItem.itemProps['required']"
              v-model:value="formConfig.currentItem.itemProps['message']"
              placeholder="请输入必选提示"
            />
          </FormItem>
          <FormItem
            v-if="!['Grid'].includes(formConfig.currentItem.component)"
            label="校验规则"
            :class="{ 'form-rule-props': !!formConfig.currentItem.itemProps['rules'] }"
          >
            <RuleProps />
          </FormItem>
        </Form>
        <!--        h5表单-->
        <Form  label-align="left" layout="vertical"  v-if="formConfig.currentItem.isH5">
<!--          h5头部公共配置-->
          <div v-for="item of h5HeadBaseFormItemProps" :key="item.name">
            <FormItem :label="item.label" v-if="showProps(item.exclude)">
              <component
                v-if="item.component"
                class="component-props"
                v-bind="item.componentProps"
                :is="item.component"
                v-model:value="formConfig.currentItem[item.name]"
              />
            </FormItem>
          </div>

<!--          h5图片组件配置-->
          <div v-if="formConfig.currentItem.component=='VantImagePlugin'" v-for="item of vantImageFormItemProps" :key="item.name">
            <FormItem :label="item.label" v-if="showProps(item.exclude)">
              <component
                v-if="item.component"
                class="component-props"
                v-bind="item.componentProps"
                :is="item.component"
                v-model:value="formConfig.currentItem.componentProps[item.name]"
              />
            </FormItem>
          </div>

          <div v-if="formConfig.currentItem.component=='VantTxtPlugin'" v-for="item of vantTxtFormItemProps" :key="item.name">
            <FormItem :label="item.label" v-if="showProps(item.exclude)">
              <component
                v-if="item.component"
                class="component-props"
                v-bind="item.componentProps"
                :is="item.component"
                v-model:value="formConfig.currentItem[item.name]"
              />
            </FormItem>
          </div>

          <div v-if="formConfig.currentItem.component=='VantDivPlugin'" v-for="item of vantDivFormItemProps" :key="item.name">
            <FormItem :label="item.label" v-if="showProps(item.exclude)">
              <component
                v-if="item.component"
                class="component-props"
                v-bind="item.componentProps"
                :is="item.component"
                v-model:value="formConfig.currentItem[item.name]"
              />
            </FormItem>
          </div>

          <div v-if="formConfig.currentItem.component=='VantNoticeBarPlugin'" v-for="item of vantNoticeBarFormItemProps" :key="item.name">

            <FormItem :label="item.label" v-if="showProps(item.exclude)">
              <component
                v-if="item.component"
                class="component-props"
                v-bind="item.componentProps"
                :is="item.component"
                v-model:value="formConfig.currentItem[item.name]"
              />
            </FormItem>
          </div>

          <div v-if="formConfig.currentItem.component=='VantImgSwipePlugin'" v-for="item of vantImgSwipeBarFormItemProps" :key="item.name">

            <FormItem :label="item.label" v-if="showProps(item.exclude)">
              <component
                v-if="!item.tag"
                class="component-props"
                v-bind="item.componentProps"
                :is="item.component"
                v-model:value="formConfig.currentItem[item.name]"
              />
              <component
                v-if="item.tag&&item.tag=='Switch'"
                class="component-props"
                v-bind="item.componentProps"
                :is="item.component"
                v-model:checked="formConfig.currentItem[item.name]"
              />
            </FormItem>
          </div>

 <!--         h5脚部公共配置-->
          <div v-for="item of h5BottomFormItemProps" :key="item.name">
            <FormItem :label="item.label" v-if="showProps(item.exclude)">
              <component
                v-if="item.component"
                class="component-props"
                v-bind="item.componentProps"
                :is="item.component"
                v-model:value="formConfig.currentItem[item.name]"
              />
            </FormItem>
          </div>
<!--          <div>-->
<!--            <button @click="testFn">test</button>-->
<!--          </div>-->


        </Form>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup name="FormItemProps">
  import { computed, watch } from 'vue';
  import {
    baseFormItemControlAttrs,
    baseFormItemProps,
    advanceFormItemProps,
    advanceFormItemColProps,

    h5HeadBaseFormItemProps,
    vantImageFormItemProps,
    h5BottomFormItemProps,
    vantTxtFormItemProps,
    vantDivFormItemProps,
    vantNoticeBarFormItemProps,
    vantImgSwipeBarFormItemProps
  } from '../../VFormDesign/config/formItemPropsConfig';

  import { Empty, Input, Form, FormItem, Switch, Checkbox, Col } from 'ant-design-vue';
  import RuleProps from './RuleProps.vue';
  import { useFormDesignState } from '../../../hooks/useFormDesignState';
  import { isArray } from 'lodash-es';
  import {ref} from 'vue';
  const { formConfig } = useFormDesignState();

  watch(
    () => formConfig.value,
    () => {
      if (formConfig.value.currentItem) {
        formConfig.value.currentItem.itemProps = formConfig.value.currentItem.itemProps || {};
        formConfig.value.currentItem.itemProps.labelCol =
          formConfig.value.currentItem.itemProps.labelCol || {};
        formConfig.value.currentItem.itemProps.wrapperCol =
          formConfig.value.currentItem.itemProps.wrapperCol || {};

        h5ComponentsInit()
      }
    },
    { deep: true, immediate: true },
  );
  const showProps = (exclude: string[] | undefined) => {
    if (!exclude) {
      return true;
    }
    return isArray(exclude) ? !exclude.includes(formConfig.value.currentItem!.component) : true;
  };

  const controlPropsList = computed(() => {
    return baseFormItemControlAttrs.filter((item) => {
      return showProps(item.exclude);
    });
  });

  //一些h5组件数据的处理
  function h5ComponentsInit(){
    if(formConfig.value.currentItem?.isH5){
      if(formConfig.value.currentItem.component=='VantImagePlugin'){

        if(formConfig.value.currentItem.componentProps.defaultValue){
          formConfig.value.currentItem.src=formConfig.value.currentItem.componentProps.defaultValue
        }
      }

    //  console.log("---currentItem",formConfig.value.currentItem.componentProps.defaultValue);

    }
  }


  function testFn(){
    // console.log("---formConfig.value.currentItem::",formConfig.value.currentItem)
  }

</script>
